<template>
	<div>
		<ul>
			<li v-for="message in messageList" :key="message.id">
			<!-- 跳转路由并携带params参数 to的字符串写法-->
			 <!-- <router-link :to="`/home/message/deatil/${message.id}/${message.title}`">{{message.title}}</router-link> -->
			<!-- 跳转路由并携带params参数 to的对象写法-->
			  <router-link :to="{
				  name:'xiangqing',
				  params:{
					  id:message.id,
					  title:message.title
					  }
				}">
				{{message.title}}
			  </router-link>
			  <button type="button" @click="pushShow(message)">push查看</button>
			  <button type="button" @click="replaceShow(message)">replace查看</button>
			</li>
		</ul>
		<hr >
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:"Message",
		data(){
			return {
				messageList:[
					{id:"001",title:"消息001"},
					{id:"002",title:"消息002"},
					{id:"003",title:"消息003"}
				]
			}
		},
		beforeDestroy() {
			console.log("Message要被被销毁了...")
		},
		methods:{
			pushShow(message){
				this.$router.push({
					name:'xiangqing',
					params:{
						id:message.id,
						title:message.title
					}
				})
			},
			replaceShow(message){
				this.$router.replace({
					name:'xiangqing',
					params:{
						id:message.id,
						title:message.title
					}
				})
			}
		}
	}
</script>

<style>
</style>
